<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 1200px;
            height: 800px;
            margin: 10px auto;
            cursor: url("images/cs.png"),default;
        }
    </style>
    <script src="01test.js"></script>
    <script>
        var context = null;
        var grounds = [];
        var grass = [];
        var moveBlocks = [];
        var pl = new Player(500,250,50,50);

        function getRandom(n,m){
            return Math.floor(Math.random() * (m-n+1)) + n;
        }

        function init(){
            for(var i = 0;i <24;i++){
                for(var j = 0;j<16;j++){
                    grounds.push(new Ground(i*50,j*50,50,50,1));
                }
            }

            for(var i = 0;i<10;i++){
                var x = getRandom(0,23);
                var y = getRandom(0,15);
                grass.push(new Ground(x*50,y*50,50,50,2));
            }

            moveBlocks = getMoveblocks(pl);
        }

        function getMoveblocks(p1){
            var ps = [];
            var x1 = p1.x/p1.width - p1.movePower;
            var y1 = p1.y/p1.height - p1.movePower;
            var x2 = p1.x/p1.width + p1.movePower;
            var y2 = p1.y/p1.height + p1.movePower;
            //x轴
            for(var i = x1;i<=x2;i++){
                if(i!=p1.x/p1.width){
                    ps.push(new Grid(i*50,p1.y));
                }
            }
            //y轴
            for(var i = y1;i<=y2;i++){
                if(i!=p1.y/p1.height){
                    ps.push(new Grid(p1.x,i*50));
                }
            }
            var ps1 = [];
            //第一象限
            for(var i = 1-p1.movePower;i<0;i++){
                for(var j = 1;j<=i+p1.movePower;j++){
                    if(i!=0 && j != 0){
                        ps1.push(new Grid(p1.x + j * 50,p1.y + i * 50));
                    }
                }
            }
            var ps2 = [];
            //第二象限
            for (var i = 0; i < ps1.length; i++) {
                ps2.push(new Grid(ps1[i].x,p1.y + Math.abs(ps1[i].y - p1.y)));
            }
            var ps3 = [];
            //第三象限
            for (var i = 0; i < ps1.length; i++) {
                ps3.push(new Grid(p1.x-Math.abs(p1.x-ps1[i].x),p1.y + Math.abs(ps1[i].y - p1.y)));
            }
            var ps4 = [];
            //第四象限
            for (var i = 0; i < ps1.length; i++) {
                ps4.push(new Grid(p1.x-Math.abs(p1.x-ps1[i].x),ps1[i].y));
            }
            ps = ps.concat(ps1,ps2,ps3,ps4);
            return ps;
        }

//        function getNewGrid(p,arr){
//            var x = p1.x / 50;
//            var y = p1.y / 50;
//            var dis = p1.movePower;
//            for(var i = 0;i<=dis;i++){
//                for(var j = 0; j <= dis;j++){
//                    if(j*j+i*i<=dis*dis){
//                        var xx = x - i;
//                        var yy = y - j;
//                        arr.push(new Grid(xx*50,yy*50))
//                    }
//                }
//            }
//        }

        function render(){
            for(var i = 0; i< grounds.length;i++){
                grounds[i].render(context);
            }
            for(var i = 0; i < grass.length;i++){
                grass[i].render(context);
            }
            for(var i = 0;i<moveBlocks.length;i++){
                moveBlocks[i].render(context);
            }
            pl.render(context);
        }

        window.onload = function(){
            context = document.getElementById("canvas").getContext("2d");
            init();
            setInterval(function(){
                render();
            },16);
        }
    </script>
</head>
<body>
    <div class="father">
        <canvas id="canvas" width="1200" height="800"></canvas>
    </div>
</body>
</html>